<template>
  <view class="canvas-wrap" style="position: relative;" :style="{width: '510rpx',height: '752rpx'}">
    <tki-qrcode class="tkiQrcode" ref="qrcode" :val="detailData.url" unit="upx" :size="450" :onval="true" :loadMake="true" :showLoading="true" @result="qrR"/>
    <canvas :style="{width: '510rpx',height: '752rpx'}" :canvas-id="canvasId" style="position: absolute;top: 0;"></canvas>
  </view>
</template>
<script>
import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
export default {
  props: {
    detailData: {
      type: Object,
      default: function () {
        return {
          name: null,
          _userName: null,
          _href: null,
          price: null,
          marketPrice: null,
          images: [],
          url: null
        }
      }
    },
    canvasId: String,
    type: {
      type: Number,
      default: 1
    }
  },
  components: {
    tkiQrcode
  },
  data () {
    return {
      path: '',
      posterImg: ''
    }
  },
  methods: {
    qrR (path) {
      if (path == '') {
        uni.showToast({
          title: '生成失败，请重试',
          icon: 'none'
        });
        return;
      }
      this.path = path;
      let _self = this;
      uni.getImageInfo({
        src: _self.detailData.images[0],
        success(res) {
          uni.showLoading({
            title: '海报正在生成中',
            mask: true
          });
          _self.drawCanvas(res.path)
        }
      })
      // this.drawCanvas();
    },
    drawCanvas (mainImg) {
      let that = this;
      const ctx = uni.createCanvasContext(this.canvasId)
      ctx.setFillStyle('#FFFFFF')
      ctx.fillRect(0, 0, uni.upx2px(510),uni.upx2px(752))
      // ctx canvasId mainImg: 分享当前商品的图片 path: 二维码的地址
      ctx.drawImage(mainImg, 0, 0, uni.upx2px(510), uni.upx2px(510))
      ctx.setFontSize(uni.upx2px(28))
      ctx.setFillStyle('#000000')
      // this.drawText(ctx, this.goodObj.name, uni.upx2px(20), uni.upx2px(552), uni.upx2px(40), uni.upx2px(300), 2)
      // 判断内容是否可以一行绘制完毕
      var drawTxt = ''; // 当前绘制的内容
      var drawLine = 1; // 第几行开始绘制    
      var drawIndex = 0; // 当前绘制内容的索引 
      var drawX = uni.upx2px(20);
      var drawY = uni.upx2px(552);
      if(ctx.measureText(this.detailData.name).width <= uni.upx2px(300)) {
        ctx.fillText(this.detailData.name, drawX, uni.upx2px(572));
      } else {        
        for (var i = 0; i < this.detailData.name.length; i++) {                
          drawTxt += this.detailData.name[i];                
          if (ctx.measureText(drawTxt).width >= uni.upx2px(300)) {                   
            if (drawLine >= 2) {                       
              ctx.fillText(this.detailData.name.substring(drawIndex, i) + '..', drawX, drawY);                        
              break;                   
            } else {                       
              ctx.fillText(this.detailData.name.substring(drawIndex, i + 1), drawX, drawY);                    
              drawIndex = i + 1;
              drawLine += 1;
              drawY += uni.upx2px(40);
              drawTxt = '';           
            }                           
          } else {                              
            // 内容绘制完毕，但是剩下的内容宽度不到300                    
            if (i === this.detailData.name.length - 1) {                        
              ctx.fillText(this.detailData.name.substring(drawIndex), drawX, drawY);                    
            }
          }            
        }
      }
      ctx.setFontSize(uni.upx2px(20))
      ctx.setFillStyle('#000000')
      ctx.fillText(this.detailData._userName + '推荐', uni.upx2px(86), uni.upx2px(646))
      // // 绘制价格
      ctx.setFontSize(uni.upx2px(32))
      ctx.setFillStyle('#FC4A5B')
      ctx.fillText('￥' + this.detailData.price, uni.upx2px(20), uni.upx2px(718))
      ctx.setFontSize(uni.upx2px(24))
      ctx.setFillStyle('#999')
      ctx.fillText('￥' + this.detailData.marketPrice, uni.upx2px(156), uni.upx2px(718))
      // ctx.setLineWidth(1)
      // ctx.beginPath()
      ctx.moveTo(uni.upx2px(156), uni.upx2px(710))
      ctx.lineTo(uni.upx2px(240), uni.upx2px(710))
      ctx.setStrokeStyle('#999')
      ctx.stroke()
      // // 二维码的位置
      ctx.drawImage(this.path, uni.upx2px(362), uni.upx2px(562), uni.upx2px(128), uni.upx2px(128))
      // // 绘制圆形头像
      ctx.arc(uni.upx2px(48), uni.upx2px(640), uni.upx2px(28), 0, 2 * Math.PI)
      // ctx.clip()
      // this.userInfo.href = "https://zy-image.oss-cn-hangzhou.aliyuncs.com/avatar_default.jpg";
      ctx.drawImage(this.detailData._href, uni.upx2px(20), uni.upx2px(612), uni.upx2px(56), uni.upx2px(56))
      
      ctx.draw(true, function () {
        setTimeout(() => {
          uni.canvasToTempFilePath({
            canvasId: that.canvasId,
            success (res) {
              uni.hideLoading();
              that.posterImg = res.tempFilePath;
              that.$emit('updateQRCodeUrl', {
                url: res.tempFilePath
              });
            },
            fail (res) {
              uni.hideLoading();
              uni.showToast({
                title: '生成海报失败',
                icon: 'none'
              })
            },
          })
        }, 1000);
      });
    }
  }
}
</script>

<style lang="scss" scoped>
  .tkiQrcode {
    position: fixed;
    top: -99999upx;
    left: -99999upx;
    z-index: -99999;
  }
</style>
